﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="index.aspx.cs" Inherits="WebSite.index" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>教育工具箱-ToolBox For EDU</title>
    <link href="StyleCss/StyleCss1.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/jquery-1.8.3.js"></script>
    <script src="Scripts/common.js"></script>
</head>
<body>
    <section id="canvasObjects">
        <div id="desktopLayer">
        </div>
        <canvas id="casPencil" height="650" width="996" class="casPencil">当前WEB应用适用HTML5标准，您现在使用的浏览器不支持HTML5标准，请改用使用支持HTML5标准的浏览器访问此应用！<br />
            根据您的设备和操作系统，推荐如下浏览器：<a href="http://html5test.com/results/desktop.html">PC桌面浏览器</a>、<a href="http://html5test.com/results/mobile.html">手机等手持式终端设备</a><br />
            <img src="Images/html5logo.png" />
        </canvas>
    </section>
    <section>
        <%--工具箱开始--%>
        <div id="toolboxLayer">
            <div id="toollistLayer">
                <div title="常用工具:铅笔(随手画)" class="toolTitle">
                    <img src="Images/tool-default.png" />常用工具
                </div>
                <div class="toolContent">
                    <img id="Pencil" title="铅笔工具" class="toolImgButton" src="Images/tool-pencil.png" />
                    <img id="Textbox" title="文字工具" class="toolImgButton" src="Images/tool-text.png" />
                </div>
                <div title="数学工具:各种基本图形、圆规、直尺、量角器等" class="toolTitle">
                    <img src="Images/tool-math.png" />数学工具
                </div>
                <div class="toolContent">
                    <img title="三角形工具" class="toolImgButton" src="Images/tool-triangle.png" />
                    <img title="圆形工具" class="toolImgButton" src="Images/tool-circle.png" />
                    <img title="长方形工具" class="toolImgButton" src="Images/tool-trectangle.png" />
                </div>
            </div>
            <div id="switchLayer" onclick="switchToolBox();" title="展开/折叠工具箱">
                <img id="switchImg" src="Images/switchbutton-2.gif" />
            </div>
        </div>
        <%--工具箱结束--%>
    </section>
</body>
</html>
<script type="text/javascript">
    $(document).ready(function () {
        InitWebApp();
    });

    //初始化WEB应用
    function InitWebApp() {
        InitAppLayer();
        $(".toolTitle").bind("click", showToolContent);
        $(".toolImgButton").bind("click", selectTool);
        canvasEventBind();
    }

    //初始化应用层
    function InitAppLayer() {
        var initLayer = new GlobalConst();
        setLayer("desktopLayer", initLayer.ZIndex_DesktopLayer);
        setLayer("casPencil", initLayer.ZIndex_casPencil);
        setLayer("toolboxLayer", initLayer.ZIndex_ToolBoxLayer);
        setLayer("toollistLayer", initLayer.ZIndex_ToolListLayer);
        setLayer("switchLayer", initLayer.ZIndex_SwitchLayer);
    }

    //展开/折叠工具箱
    function switchToolBox() {
        $("#toollistLayer").toggle();
        if ($("#switchLayer").css("left") == "0px") {
            $("#switchLayer").css("left", "138px");
            $("#switchImg").attr("src", "Images/switchbutton-1.gif");
        }
        else {
            $("#switchLayer").css("left", "0px");
            $("#switchImg").attr("src", "Images/switchbutton-2.gif");
        }
    }

    //显示工具箱中工具（展开/折叠动画显示）
    function showToolContent() {
        $(".toolContent").hide(150);
        $(this).next("div").toggle(150);
    }

    //选中工具
    function selectTool() {
        var selectToolID = $(this).attr("id");
        objWorker[selectToolID]();
        switchToolBox();
    }

    //所有画布事件绑定
    function canvasEventBind() {
        $("#casPencil").bind("mousedown", function (event) {
            contentWork.moveTo(event.pageX, event.pageY);
            isPainting = true;
        });
        $("#casPencil").bind("mousemove", function (event) {
            if (isPainting) {
                contentWork.lineTo(event.pageX, event.pageY);
                contentWork.stroke();
            }
        });
        $("#casPencil").bind("mouseup", function (event) {
            isPainting = false;
        });
    }

    //工作者对象
    var objWorker = {
        "Pencil": function () {
            canvasWork = $("#casPencil");
            contentWork = canvasWork.get(0).getContext("2d");
            contentWork.strokeStyle = "#0000ff";//画笔演示
            contentWork.lineWidth = 5;//线条宽度
            contentWork.lineCap = "round";//笔头形状
            contentWork.lineJoin = "round";//转角形状
        }
    }

    //测试动态创建CANVAS函数，暂时无需理会
    function testcreatecanvas() {
        //动态建立Canvas元素（parentID:父ID名，selfID:自己的ID，width:宽度，height:高度，top:上边界，left:左边界，color背景色）
        var mycanvas = {
            parentID: "body",
            selfID: "mycanvas",
            width: 300,
            height: 300,
            top: 200,
            left: 200,
            color: "rgba(0, 0, 0, 0.05)"
        }
        createCanvas(mycanvas);
        setLayer("mycanvas", const_UserCustomLayer + 1);
        switchToolBox();
    }

    //动态建立Canvas元素（parentID:父ID名，selfID:自己的ID，width:宽度，height:高度，top:上边界，left:左边界，color背景色）
    function createCanvas(objCanvas) {
        $(objCanvas.parentID).append("<Canvas id='" + objCanvas.selfID + "'></Canvas>");
        $("#" + objCanvas.selfID).attr("width", objCanvas.width);
        $("#" + objCanvas.selfID).attr("height", objCanvas.height);
        $("#" + objCanvas.selfID).offset({ top: objCanvas.top, left: objCanvas.left });
        $("#" + objCanvas.selfID).css("background", objCanvas.color);
    }

    //向系统注册画布
    function registerCanvas() {

    }
</script>
